<?php
/**
 *
 * @author 李大牛家的牛 (scafel@163.com)
 * @className login.blade.php
 * @createDate 2025/7/27 - 15:01
 * @description
 **/
?>

@include('manage.default.template.header')
<style>
    .login-container {
        width: 300px;
        position: relative;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="layui-container">
    <div class="login-container">
        <form class="layui-form" action="javascript:void(0);" method="post">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
                           lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                           lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-vercode"></i>
                            </div>
                            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码"
                                   lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img src="/manage/captcha" onclick="this.src='/manage/captcha?t='+ new Date().getTime();"
                                 alt="验证码加载失败">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="manage-login">登录</button>
            </div>
            <div class="layui-form-item">
                <label>社交账号登录</label>
                <span style="padding: 0 21px 0 6px;">
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                </span>
            </div>
        </form>
    </div>


    <div id="login_select_role" style="display: none;">
        <table class="layui-hide" id="login_role_table"></table>
    </div>
</div>
@include('manage.default.template.footer')
<script>
    layui.use(["util", "form", "interactive", "layer"], function () {
        var form = layui.form,
            $ = layui.$,
            layer = layui.layer,
            table = layui.table,
            req = layui.interactive;

        table.render({
            elem:"#login_role_table",
            id: "login_role_table",
            cols: [[
                {field: "ltar001", title: "角色名称", width: 200, unresize: true},
                {field: "code", title: "角色编码", width: 190 , unresize: true},
            ]],
        });

        // 行单击事件
        table.on('row(login_role_table)', function(obj) {
            var data = obj.data; // 得到当前行数据
            setRole(data.code);
            layer.close(layer.index);
        });

        // 提交事件
        form.on('submit(manage-login)', function (data) {
            const field = data.field; // 获取表单字段值
            req.post("/manage/login/in", field, function (res) {
                var adminRoles = res.data.adminRole;
                if (adminRoles.length > 1) {
                    selectRoles(adminRoles);
                } else if (adminRoles.length === 1) {
                    setRole(adminRoles[0].code);
                } else {
                    layer.msg("请选择角色");
                }
            })
            return false; // 阻止默认 form 跳转
        });

        function selectRoles(adminRoles) {
            table.reloadData("login_role_table", {
                data: adminRoles,
            });
            layer.open({
                type: 1,
                title: "选择角色",
                area: ['400px', 'auto'],
                offset: 'auto',
                anim: 0,
                content: $("#login_select_role"), // 捕获层
                scrollbar: false,
                resize: false,
            });
        }

        function setRole(code) {
            req.post("/manage/login/setRole", {code: code}, function (res) {
                top.location.href = "/manage/home";
            })
        }
    });
</script>
